<template>
	<view class="graphic-statistics">
		<view class="title">{{ projectName }}</view>
		
		<view class="dial-plate">
			<view class="dial-plate-content">
				<qiun-data-charts type="gauge" :opts="dialPlateConfig" :chartData="dialPlateData" canvas2d canvasId="qiun-data-charts-gauge" />
				<view class="middle-wheel-disc">
					<view class="label-num">{{ projectData.overallSchedule || 0 }}%</view>
					<view class="label-text">总进度</view>
				</view>
				<view class="pointer" :style="{transform: `rotate(${projectData.deg ? projectData.deg : '-13'}deg)`}"></view>
			</view>
		</view>
		
		<view class="statistics-num">
			<view class="statistics-num-item">
				<view class="item-label">计划产值</view>
				<view class="item-num">
					<text>{{ projectData.planGrossProductNewStr }}</text>
					<text class="unit">元</text>
				</view>
			</view>
			<view class="statistics-num-item">
				<view class="item-label">完成产值</view>
				<view class="item-num">
					<text>{{ projectData.finishedGrossProductStr }}</text>
					<text class="unit">元</text>
				</view>
			</view>
		</view>
		
		<view class="title-label">施工产值</view>
		<view class="broken-line">
			<scroll-view scroll-x style="width: 100%; height: 100%;">
				<qiun-data-charts type="line" :opts="brokenLineConfig" :chartData="brokenLineData" ontouch canvas2d canvasId="qiun-data-charts-line" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import QiunDataCharts from '../../components/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue';
	export default {
		inject: ['getProjectName', 'getProjectStatisticsData'],
		components: {
			QiunDataCharts
		},
		data() {
			return {
				// 仪表盘配置
				dialPlateConfig: {
					title: {
						name: "",
					},
					subtitle: {
						name: "",
					},
					extra: {
						gauge: {
				            type: "default",
				            width: 26,
				            labelColor: "transparent",
				            startAngle: 0.95,
				            endAngle: 0.05,
				            startNumber: 0,
				            endNumber: 100,
				            labelFormat: "",
				            splitLine: {
								fixRadius: -7,
								splitNumber: 1,
								width: 30,
								color: "#fff",
								childNumber: 10,
								childWidth: 12
				            },
				            pointer: {
								width: 0,
				            }
						}
					}
				},
				// 仪表盘数据
				dialPlateData: null,
				// 折线图配置
				brokenLineConfig: {
					padding: [15, 10, 0, 15],
					dataLabel: false,
					// dataPointShape: false,
					enableScroll: false,
					legend: {},
					fontColor: "#b6c7d4",
					enableScroll: true,
					xAxis: {
						fontColor: "#b6c7d4",
						gridColor: "#ebebeb",
						axisLine: false,
						disableGrid: true,
						scrollShow: true,
						itemCount: 5
					},
					yAxis: {
						gridType: "dash",
						gridColor: "#ebebeb",
					},
					extra: {
						line: {
							type: "straight",
							width: 2,
							activeType: "solid",
							linearType: "custom",
							onShadow: false,
							animation: "horizontal"
						},
						tooltip: {
							showBox: false,
							splitLine: false,
						}
					}
				},
				// 折线图数据
				brokenLineData: {},
				// 项目名称
				projectName: '',
				// 项目数据
				projectData: {},
			}
		},
		methods: {
			/** 初始化 */
			init() {
				this.projectName = this.getProjectName()
				this.projectData = this.getProjectStatisticsData()
				// 仪表盘
				const num = this.projectData.overallSchedule > 100 ? 100 : this.projectData.overallSchedule
				const deg = 2.06 * num - 13
				this.projectData.deg = deg
				this.dialPlateData = {
					categories: [
						{"value": num / 100,"color": "#77cc4d"},
						{"value": 1,"color": "#01adfb"},
					],
					series: [
						{ name: "总进度", data: 1 }
					]
				}
				// 折线图
				const monthArray = []
				const dataArray = []
				const date = new Date()
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				const projectMonth = { ...(this.projectData.constructionOutputValue || {}) }
				if (JSON.stringify(projectMonth) === '{}') {
					monthArray.push(`${year}/${month.toString().padStart(2, '0')}`)
					dataArray.push(0)
				} else {
					while (JSON.stringify(projectMonth) !== '{}') {
						const temp = `${year}/${month.toString().padStart(2, '0')}`
						monthArray.unshift(temp)
						if (Reflect.has(projectMonth, temp)) {
							dataArray.unshift(projectMonth[temp])
							delete projectMonth[temp]
						} else {
							dataArray.unshift(0)
						}
						if (month - 1 <= 0) {
							month = 12
							year--
						} else {
							month--
						}
					}
				}
				// 当前月份没数据自动用上个月的
				for (let i = 0; i < dataArray.length; i++) {
					if (!dataArray[i]) {
						dataArray[i] = dataArray[i - 1] || 0
					}
				}
				this.brokenLineData = {
					categories: monthArray,
					series: [
						{
							name: "",
							legendShape: "none",
							color: "#2f80ed",
							data: dataArray
						},
					]
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.graphic-statistics {
		background: #fff;
		.title {
			padding-top: 27px;
			padding-bottom: 21px;
			margin: 0 26px;
			color: #445469;
			font-family: PingFang;
			font-size: 20px;
			font-weight: bold;
			line-height: 28px;
		}
		.dial-plate {
			height: 230px;
			position: relative;
			.dial-plate-content {
				height: 400px;
				width: 80vw;
				position: absolute;
				left: 10vw;
				top: -40px;
				.middle-wheel-disc {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background: #fff;
					box-shadow: 0 0 15px rgba(217, 217, 217, .5);
					width: 140px;
					height: 100px;
					border-radius: 140px 140px 0 0;
					position: absolute;
					left: 50%;
					top: 120px;
					transform: translateX(-50%);
					z-index: 1;
					.label-num {
						color: #303030;
						font-weight: bold;
						font-size: 38px;
						font-family: DIN;
						line-height: 49px;
						margin-top: 10px;
					}
					.label-text {
						color: #8d9397;
						font-size: 15px;
						font-family: PingFang;
						font-weight: 500;
					}
				}
				.pointer {
					width: 140px;
					height: 140px;
					border-radius: 140px;
					position: absolute;
					left: calc(50% - 70px);
					top: 120px;
					transform-origin: center;
					transform: rotate(-13deg);
					transition: .2s;
					&::after {
						content: "";
						box-shadow: 0 0 10px rgba(202, 202, 202, .5);
						border-radius: 8px 0 0 8px;
						background: #fff;
						position: absolute;
						height: 6px;
						width: 120px;
						top: 50%;
						left: 50%;
						transform: translate(-100%, -50%);
					}
				}
			}
		}
		.statistics-num {
			display: flex;
			align-items: center;
			margin: 0 22px;
			.statistics-num-item {
				flex: 1;
				&:last-of-type {
					margin-left: 5px;
				}
				.item-label {
					line-height: 20px;
					margin-bottom: 5px;
					color: #6a819e;
					font-weight: bold;
					font-family: PingFang;
				}
				.item-num {
					line-height: 29px;
					color: #425166;
					font-size: 22px;
					font-weight: 500;
					text:nth-of-type(1) {
						font-family: DIN;
					}
					.unit {
						font-family: PingFang;
						font-size: 18px;
					}
				}
			}
		}
		.title-label {
			margin-top: 24px;
			margin-left: 20px;
			line-height: 30px;
			color: #6a819e;
			font-weight: bold;
			font-family: PingFang;
		}
		.broken-line {
			width: 100%;
			height: 190px;
			margin-top: 6px;
		}
	}
</style>